<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-pie-chart'></i> 商品管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-button
                    type='primary'
                    icon='el-icon-circle-plus'
                    class='handle-del mr10'
                    @click='addCommodity'
                >新增
                </el-button>
                <el-input v-model='query.title' prefix-icon='el-icon-search' clearable placeholder='请输入关键词'
                          class='handle-input mr10'></el-input>
                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
            </div>
            <div class='handle-box'>
                <el-radio-group v-model='query.status' @change='sortChange'>
                    <el-radio-button label=''>全部</el-radio-button>
                    <el-radio-button label='0'>已上架</el-radio-button>
                    <el-radio-button label='1'>已下架</el-radio-button>
                </el-radio-group>
            </div>
            <el-table
                :data='commodityList'
                stripe
                style='width: 100%'>
                <el-table-column
                    prop='index'
                    label='序号'
                    align='center'
                    width='100'>
                    <template slot-scope='scope'>
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop='data'
                    align='center'
                    label='商品图片(点击预览大图)'
                    width='150'>
                    <template slot-scope='scope'>
                        <el-image
                            :src='scope.row.commodityDetail.photoUrl'
                            :preview-src-list='srcList'
                            fit='scale-down'>
                            <div slot='error' class='image-slot'>
                                <i class='el-icon-picture-outline'></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                    prop='title'
                    label='商品名称'
                    align='center'
                    width='200'>
                </el-table-column>
                <el-table-column
                    prop='introduce'
                    label='商品简介'
                    align='center'
                    width='300'>
                </el-table-column>

                <el-table-column
                    prop='price'
                    align='center'
                    label='售价(积分)'
                    width='180'>
                </el-table-column>
                <el-table-column
                    prop='amount'
                    label='库存'
                    align='center'
                    width='100'>
                </el-table-column>
                <el-table-column
                    prop='commodityDetail.sales'
                    label='销量'
                    align='center'
                    width='250'>
                </el-table-column>
                <el-table-column
                    prop='status'
                    label='商品状态'
                    align='center'
                    width='100'>
                    <template slot-scope='scope'>
                        <el-tag :type="scope.row.status == 0 ? ''
                        : scope.row.status == 1 ? 'info' : 'danger'">
                            {{ scope.row.status == 0 ? '已上架'
                            : scope.row.status == 1 ? '已下架' : '' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label='操作'
                    align='center'
                    width='200'>
                    <template slot-scope='scope'>
                        <el-button
                            type='text'
                            size='mini'
                            @click='handleEdit(scope.$index, scope.row)' icon='el-icon-edit'>编辑
                        </el-button>
                        <el-button
                            type='text'
                            size='mini'
                            class="red"
                            @click='handleDelete(scope.$index, scope.row)' icon='el-icon-delete'>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='sizes, total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @size-change="handleSizeChange"
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>

        <el-dialog title='编辑商品' :visible.sync='dialogTableVisible'>
            <el-form ref='form' :model='commodity' label-width='80px'>
                <el-form-item label='商品图片'>
                    <el-upload
                        class='avatar-uploader'
                        :action="GLOBAL.httpUrl + '/file/upload'"
                        :show-file-list='false'
                        :on-success='handleAvatarSuccess'
                        :before-upload='beforeAvatarUpload'>
                        <el-image
                            style='width: 100px'
                            fit='scale-down'
                            :src='commodity.commodityDetail.photoUrl'
                        >
                            <div slot='error' class='image-slot'>
                                <i class='el-icon-picture-outline'></i>
                                <el-button type='text'>点击上传</el-button>
                            </div>
                        </el-image>
                    </el-upload>
                </el-form-item>

                <el-form-item label='名称'>
                    <el-input v-model='commodity.title'></el-input>
                </el-form-item>
                <el-form-item label='介绍'>
                    <el-input type='textarea' v-model='commodity.introduce'></el-input>
                </el-form-item>
                <el-form-item label='价格'>
                    <el-input v-model='commodity.price'></el-input>
                </el-form-item>
                <el-form-item label='库存'>
                    <el-input v-model='commodity.amount'></el-input>
                </el-form-item>
                <el-form-item label='是否上架'>
                    <el-radio-group v-model='commodity.status'>
                        <el-radio :label='0'>上架</el-radio>
                        <el-radio :label='1'>下架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogTableVisible = false'>取 消</el-button>
                <el-button type='primary' @click='submitCommodity'>确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'draglist',
    data() {
        return {
            commodityList: [],
            srcList: [],

            commodity: {
                commodityDetail: {
                    commodityId: null,
                    id: null,
                    photoUrl: '',
                    sales: 0
                },
                amount: 0,
                createTime: null,
                id: null,
                introduce: null,
                price: 0,
                status: 0,
                title: null
            },

            dialogTableVisible: false,

            query: {
                pageIndex: 1,
                pageSize: 10,
                status: '',
                title: ''
            },
            pageTotal: 0
        };
    },
    components: {},
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.$axios.get(this.GLOBAL.httpUrl + '/commodity', {
                params: this.query
            }).then(res => {
                for (let i = 0; i < res.data.data.resultList.length; i++) {
                    this.srcList.push(res.data.data.resultList[i].commodityDetail.photoUrl);
                }
                this.pageTotal = res.data.data.totalCount;
                this.commodityList = res.data.data.resultList;
            });
        },
        // 分页导航
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        sortChange() {
            this.$set(this.query, 'pageIndex', 1);
            this.$set(this, 'pageTotal', 1);
            this.pageTotal = 0;
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },

        handleEdit(index, row) {
            this.dialogTableVisible = true;
            this.commodity = row;
        },

        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete(this.GLOBAL.httpUrl + '/commodity', {
                    params:{
                        id: row.id
                    }
                }).then(res => {
                    if (res.data.status == 200) {
                        this.getData();
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
        },

        addCommodity() {
            this.dialogTableVisible = true;
            this.commodity = {
                commodityDetail: {
                    commodityId: null,
                    id: null,
                    photoUrl: '',
                    sales: 0
                },
                amount: 0,
                createTime: null,
                id: null,
                introduce: null,
                price: 0,
                status: 0,
                title: null
            };
        },
        handleAvatarSuccess(res, file) {
            if (res.status == 200) {
                // this.commodity.commodityDetail.photoUrl = URL.createObjectURL(file.raw);
                this.commodity.commodityDetail.photoUrl = res.data;
                this.$message.success(res.message)
            }else {
                this.$message.error(res.message)
            }

        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isLt2M;
        },
        submitCommodity() {
            if (this.commodity.id != null) {
                this.$axios.put(this.GLOBAL.httpUrl + '/commodity', this.commodity)
                .then(res => {
                    this.getData();
                    this.dialogTableVisible = false;
                })
            } else {
                this.$axios.post(this.GLOBAL.httpUrl + '/commodity', this.commodity)
                    .then(res => {
                        this.getData();
                    })
                this.dialogTableVisible = false;
            }
        }
    }
};

</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.mr10 {
    margin-right: 10px;
}

.schart-box {
    display: inline-block;
    margin: 20px;
}

.schart {
    width: 600px;
    height: 400px;
}

.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}

/deep/ .avatar-uploader .el-upload--text {
    width: auto;
    height: auto;
}

.red {
    color: #ff0000;
}

</style>
